<script>
import * as echarts from "../../public/libs/echarts5.esm";
import { InfoCircleOutlined } from "@ant-design/icons-vue";

export default {
  name: "OfflineCourseAttendance",
  components: {
    InfoCircleOutlined
  },
  props: {
    echartsId: {
      type: Number,
      default() {
        return {};
      },
    },
    isView: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      exam: 1,
      examData: [
        { id: 1, name: "考试1" },
        { id: 2, name: "考试2" },
        { id: 3, name: "考试3" },
      ],
      data: {
        "totalNums": 1234,
        "noAttendanceNums": 1000,
        "fullAttendanceNums": 200,
        "partialAttendanceNums": 30,
        "missAttendanceNums": 3,
        "askForLeaveNums": 1
      }
    };
  },
  mounted() {
    let echartsData = [
      { value: this.data.noAttendanceNums, name: "未考勤" },
      { value: this.data.fullAttendanceNums, name: "全勤" },
      { value: this.data.partialAttendanceNums, name: "部分出勤" },
      { value: this.data.missAttendanceNums, name: "缺勤" },
      { value: this.data.askForLeaveNums, name: "请假" },
    ];
    let echartsElement = echarts.init(
      document.getElementById(`offline-course-attendance-echarts${this.echartsId}`)
    );
    let echartsOption = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          let htmlContent =
            `<div>
              <div style="color: #272E3B;">${params.seriesName}</div>
              <div style="height: 25px; line-height: 25px;">
                <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${params.color};"></span>
                <span style="color: #6B7785;">${params.name}:</span>
                <span style="color: #272E3B;">${params.value}人、${params.percent}%</span>
              </div>
            </div>`
          return htmlContent;
        }
      },
      legend: {
        right: 0,
        top: "center",
        orient: "vertical",
        icon: "circle",
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 16,
        padding: [0, 52, 0, 0],
      },
      series: [
        {
          name: "线下课考勤情况",
          type: "pie",
          width: "85%",
          radius: ["38%", "55%"],
          center: ["40%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderWidth: 4,
            borderType: "solid",
            borderColor: "#FFF",
          },
          label: {
            show: true,
            position: "center",
            formatter: ["{title|总人次}", `{num|${this.data.totalNums}人}`].join("\n"),
            rich: {
              title: {
                padding: [0, 0, 8, 0],
                color: "#424864",
              },
              num: {
                color: "#424864",
              },
            },
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            scale: false,
          },
          data: echartsData,
        },
      ],
      color: ["#F5F5F5", "#0093FF", "#51CBFF", "#FFC5C5", "#E5BAFF"],
    };
    if (this.isView) {
      echartsOption.legend.formatter = (name) => {
        if (echartsData.length) {
          switch (name) {
            case "未考勤":
              return name + '：' + echartsData[0].value + '人/' + ((this.data.noAttendanceNums / this.data.totalNums) * 100).toFixed(2) + '%';
              break;
            case "全勤":
              return name + '：' + echartsData[1].value + '人/' + ((this.data.fullAttendanceNums / this.data.totalNums) * 100).toFixed(2) + '%';
              break;
            case "部分出勤":
              return name + '：' + echartsData[2].value + '人/' + ((this.data.partialAttendanceNums / this.data.totalNums) * 100).toFixed(2) + '%';
              break;
            case "缺勤":
              return name + '：' + echartsData[3].value + '人/' + ((this.data.missAttendanceNums / this.data.totalNums) * 100).toFixed(2) + '%';
              break;
            case "请假":
              return name + '：' + echartsData[4].value + '人/' + ((this.data.askForLeaveNums / this.data.totalNums) * 100).toFixed(2) + '%';
              break;
            default:
              return "";
          }
        };
      };
      echartsOption.legend.padding = [0, 16, 0, 0];
    };
    echartsElement.setOption(echartsOption);
  },
  methods: {
    focus() {},
    handleChange() {},
  }
};
</script>

<template>
  <div class="offline-course-attendance">
    <div class="header">
      <div class="header__left" v-if="isView">
        <div class="header__left__line"></div>
        <span class="font-semibold">线下课名称</span>
        <span class="font-semibold">-线下课考勤情况</span>
      </div>
      <div class="header__left" v-else>
        <div class="header__left__title font-semibold">线下课考勤情况</div>
        <a-tooltip placement="topLeft">
          <template #title>
            <span>统计对象为培训项目中的线下课</span>
          </template>
          <InfoCircleOutlined />
        </a-tooltip>
      </div>
      <div class="" v-if="!isView">
        <a-select
          ref="select"
          v-model:value="exam"
          style="width: 156px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option
            :value="item.id"
            v-for="item in examData"
            :key="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <div
      class="echarts-box"
      :id="`offline-course-attendance-echarts${echartsId}`"
    ></div>
  </div>
</template>

<style lang="less" scoped>
.offline-course-attendance {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;

    .header__left {
      display: flex;
      align-items: center;

      .header__left__line {
        width: 8px;
        height: 22px;
        background: #0093FF;
        margin-right: 8px;
      }

      .header__left__title {
        margin-right: 4px;
      }

      .font-semibold {
        font-weight: 600;
      }
    }
  }

  .echarts-box {
    width: 428px;
    height: 380px;
    margin: auto;
  }
}
</style>

